/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/dt-3.0.2
 *
 * Included libraries:
 *   DataTables 3.0.2
 */

:root {
    --dt_background-selected: 34, 51, 90;
    --dt_color-selected: 255, 255, 255;
    --dt_link_color-selected: 228, 228, 228;
    --dt-row_background: transparent;
    --dt-row_background-selected: var(--dt_background-selected);
    --dt-row-text_color-selected: var(--dt_color-selected);
    --dt-row-link_color-selected: var(--dt_link_color-selected);
    --dt-row_background-stripe: 0, 0, 0;
    --dt-row_background-hover: 0, 0, 0;
    --dt-column-ordering_background: 0, 0, 0;
    --dt-header-cell_align-items: center;
    --dt-header-cell_vertical-align: middle;
    --dt-html_background: white;
}
:root.dark {
    --dt-html_background: rgb(33, 37, 41);
}

table.dataTable tbody td.dt-control {
    text-align: center;
    cursor: pointer;
}
table.dataTable tbody td.dt-control:before {
    display: inline-block;
    box-sizing: border-box;
    content: "";
    border-top: 5px solid transparent;
    border-left: 10px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid transparent;
    border-right: 0px solid transparent;
}
table.dataTable tbody tr.dt-hasChild td.dt-control:before {
    border-top: 10px solid rgba(0, 0, 0, 0.5);
    border-left: 5px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 5px solid transparent;
}

:root.dark table.dataTable td.dt-control:before,
:root[data-bs-theme="dark"] table.dataTable td.dt-control:before,
:root[data-theme="dark"] table.dataTable td.dt-control:before {
    border-left-color: rgba(255, 255, 255, 0.5);
}
:root.dark table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-bs-theme="dark"] table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-theme="dark"] table.dataTable tr.dt-hasChild td.dt-control:before {
    border-top-color: rgba(255, 255, 255, 0.5);
    border-left-color: transparent;
}

div.dt-scroll {
    width: 100%;
}

div.dt-scroll-body thead tr,
div.dt-scroll-body tfoot tr {
    height: 0;
}
div.dt-scroll-body thead tr th,
div.dt-scroll-body thead tr td,
div.dt-scroll-body tfoot tr th,
div.dt-scroll-body tfoot tr td {
    height: 0 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
}
div.dt-scroll-body thead tr th div.dt-scroll-sizing,
div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
    height: 0 !important;
    overflow: hidden !important;
}

:root {
    --dt-order-arrow_color: rgb(51, 51, 51);
    --dt-order-arrow_color-current: #333333;
    --dt-order-arrow-height: 7px;
    --dt-order-arrow_opacity: 0.125;
    --dt-order-arrow_opacity-current: 0.65;
    --dt-order-arrow-width: 8px;
    --dt-order-arrow-gap: 1px;
    --dt-order-header_outline-hover: 2px solid rgba(0, 0, 0, 0.05);
}
:root.dark,
:root[data-bs-theme="dark"],
:root[data-theme="dark"] {
    --dt-order-arrow_color: rgb(229, 233, 238);
    --dt-order-arrow_color-current: rgb(229, 233, 238);
    --dt-order-header_outline-hover: 2px solid rgba(255, 255, 255, 0.05);
}

table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
    outline: none;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before {
    bottom: calc(50% + var(--dt-order-arrow-gap));
    border-bottom: var(--dt-order-arrow-height) solid
        var(--dt-order-arrow_color);
    border-left: calc(var(--dt-order-arrow-width) / 2) solid transparent;
    border-right: calc(var(--dt-order-arrow-width) / 2) solid transparent;
}
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
    top: calc(50% + 1px);
    border-top: var(--dt-order-arrow-height) solid var(--dt-order-arrow_color);
    border-left: calc(var(--dt-order-arrow-width) / 2) solid transparent;
    border-right: calc(var(--dt-order-arrow-width) / 2) solid transparent;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order {
    position: relative;
    width: var(--dt-order-arrow-width);
    align-self: stretch;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
    position: absolute;
    display: block;
    content: " ";
    height: 0;
    width: 0;
    left: 0;
    color: var(--dt-order-arrow_color);
    opacity: var(--dt-order-arrow_opacity);
}
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc {
    cursor: pointer;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: var(--dt-order-header_outline-hover);
    outline-offset: -2px;
}
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before {
    border-bottom-color: var(--dt-order-arrow_color-current);
    opacity: var(--dt-order-arrow_opacity-current);
}
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
    border-top-color: var(--dt-order-arrow_color-current);
    opacity: var(--dt-order-arrow_opacity-current);
}
table.dataTable
    thead
    > tr
    > th.dt-orderable-none:not(.dt-ordering-asc, .dt-ordering-desc)
    .dt-column-order:empty,
table.dataTable thead > tr > th.sorting_desc_disabled .dt-column-order:after,
table.dataTable thead > tr > th.sorting_asc_disabled .dt-column-order:before,
table.dataTable
    thead
    > tr
    > td.dt-orderable-none:not(.dt-ordering-asc, .dt-ordering-desc)
    .dt-column-order:empty,
table.dataTable thead > tr > td.sorting_desc_disabled .dt-column-order:after,
table.dataTable thead > tr > td.sorting_asc_disabled .dt-column-order:before {
    display: none;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
    outline: none;
}

table.dataTable thead > tr > th div.dt-column-header,
table.dataTable thead > tr > th div.dt-column-footer,
table.dataTable thead > tr > td div.dt-column-header,
table.dataTable thead > tr > td div.dt-column-footer,
table.dataTable tfoot > tr > th div.dt-column-header,
table.dataTable tfoot > tr > th div.dt-column-footer,
table.dataTable tfoot > tr > td div.dt-column-header,
table.dataTable tfoot > tr > td div.dt-column-footer {
    display: flex;
    justify-content: space-between;
    align-items: var(--dt-header-cell_align-items);
    gap: 4px;
}
table.dataTable thead > tr > th div.dt-column-header .dt-column-title,
table.dataTable thead > tr > th div.dt-column-footer .dt-column-title,
table.dataTable thead > tr > td div.dt-column-header .dt-column-title,
table.dataTable thead > tr > td div.dt-column-footer .dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-header .dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-footer .dt-column-title,
table.dataTable tfoot > tr > td div.dt-column-header .dt-column-title,
table.dataTable tfoot > tr > td div.dt-column-footer .dt-column-title {
    flex-grow: 1;
}
table.dataTable thead > tr > th div.dt-column-header .dt-column-title:empty,
table.dataTable thead > tr > th div.dt-column-footer .dt-column-title:empty,
table.dataTable thead > tr > td div.dt-column-header .dt-column-title:empty,
table.dataTable thead > tr > td div.dt-column-footer .dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-header .dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-footer .dt-column-title:empty,
table.dataTable tfoot > tr > td div.dt-column-header .dt-column-title:empty,
table.dataTable tfoot > tr > td div.dt-column-footer .dt-column-title:empty {
    display: none;
}

div.dt-scroll-body > table.dataTable > thead > tr > th,
div.dt-scroll-body > table.dataTable > thead > tr > td {
    overflow: hidden;
}

:root.dark table.dataTable thead > tr > th.dt-orderable-asc:hover,
:root.dark table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-desc:hover,
:root[data-bs-theme="dark"]
    table.dataTable
    thead
    > tr
    > th.dt-orderable-asc:hover,
:root[data-bs-theme="dark"]
    table.dataTable
    thead
    > tr
    > th.dt-orderable-desc:hover,
:root[data-bs-theme="dark"]
    table.dataTable
    thead
    > tr
    > td.dt-orderable-asc:hover,
:root[data-bs-theme="dark"]
    table.dataTable
    thead
    > tr
    > td.dt-orderable-desc:hover {
    outline: var(--dt-order-header_outline-hover);
}

:root {
    --dt-processing-circle_background: var(--dt_background-selected);
}

div.dt-processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -22px;
    text-align: center;
    padding: 2px;
    z-index: 10;
}
div.dt-processing > div:last-child {
    position: relative;
    width: 80px;
    height: 15px;
    margin: 1em auto;
}
div.dt-processing > div:last-child > div {
    position: absolute;
    top: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgb(var(--dt-processing-circle_background));
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dt-processing > div:last-child > div:nth-child(1) {
    left: 8px;
    animation: datatables-loader-1 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(2) {
    left: 8px;
    animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(3) {
    left: 32px;
    animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(4) {
    left: 56px;
    animation: datatables-loader-3 0.6s infinite;
}

@keyframes datatables-loader-1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes datatables-loader-3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes datatables-loader-2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}
table.dataTable.nowrap th,
table.dataTable.nowrap td {
    white-space: nowrap;
}
table.dataTable th,
table.dataTable td {
    box-sizing: border-box;
}
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: right;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
    flex-direction: row-reverse;
}
table.dataTable th.dt-left,
table.dataTable td.dt-left {
    text-align: left;
}
table.dataTable th.dt-left div.dt-column-header,
table.dataTable th.dt-left div.dt-column-footer,
table.dataTable td.dt-left div.dt-column-header,
table.dataTable td.dt-left div.dt-column-footer {
    flex-direction: row;
}
table.dataTable th.dt-center,
table.dataTable td.dt-center {
    text-align: center;
}
table.dataTable th.dt-right,
table.dataTable td.dt-right {
    text-align: right;
}
table.dataTable th.dt-right div.dt-column-header,
table.dataTable th.dt-right div.dt-column-footer,
table.dataTable td.dt-right div.dt-column-header,
table.dataTable td.dt-right div.dt-column-footer {
    flex-direction: row-reverse;
}
table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
    text-align: justify;
}
table.dataTable th.dt-justify div.dt-column-header,
table.dataTable th.dt-justify div.dt-column-footer,
table.dataTable td.dt-justify div.dt-column-header,
table.dataTable td.dt-justify div.dt-column-footer {
    flex-direction: row;
}
table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
    white-space: nowrap;
}
table.dataTable th.dt-empty,
table.dataTable td.dt-empty {
    text-align: center;
    vertical-align: top;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    text-align: left;
    vertical-align: var(--dt-header-cell_vertical-align);
}
table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
    text-align: left;
}
table.dataTable thead th.dt-head-left div.dt-column-header,
table.dataTable thead th.dt-head-left div.dt-column-footer,
table.dataTable thead td.dt-head-left div.dt-column-header,
table.dataTable thead td.dt-head-left div.dt-column-footer,
table.dataTable tfoot th.dt-head-left div.dt-column-header,
table.dataTable tfoot th.dt-head-left div.dt-column-footer,
table.dataTable tfoot td.dt-head-left div.dt-column-header,
table.dataTable tfoot td.dt-head-left div.dt-column-footer {
    flex-direction: row;
}
table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
    text-align: center;
}
table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
    text-align: right;
}
table.dataTable thead th.dt-head-right div.dt-column-header,
table.dataTable thead th.dt-head-right div.dt-column-footer,
table.dataTable thead td.dt-head-right div.dt-column-header,
table.dataTable thead td.dt-head-right div.dt-column-footer,
table.dataTable tfoot th.dt-head-right div.dt-column-header,
table.dataTable tfoot th.dt-head-right div.dt-column-footer,
table.dataTable tfoot td.dt-head-right div.dt-column-header,
table.dataTable tfoot td.dt-head-right div.dt-column-footer {
    flex-direction: row-reverse;
}
table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
    text-align: justify;
}
table.dataTable thead th.dt-head-justify div.dt-column-header,
table.dataTable thead th.dt-head-justify div.dt-column-footer,
table.dataTable thead td.dt-head-justify div.dt-column-header,
table.dataTable thead td.dt-head-justify div.dt-column-footer,
table.dataTable tfoot th.dt-head-justify div.dt-column-header,
table.dataTable tfoot th.dt-head-justify div.dt-column-footer,
table.dataTable tfoot td.dt-head-justify div.dt-column-header,
table.dataTable tfoot td.dt-head-justify div.dt-column-footer {
    flex-direction: row;
}
table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
    white-space: nowrap;
}
table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
    text-align: left;
}
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
    text-align: center;
}
table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
    text-align: right;
}
table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
    text-align: justify;
}
table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
    white-space: nowrap;
}
:root {
    /* 1. Header, Footer & Body Borders (Lebih halus dengan abu-abu terang) */
    --dt-header_border: 1px solid #e5e7eb;
    --dt-header_padding: 12px 10px;
    --dt-footer_border: 1px solid #e5e7eb;
    --dt-footer_padding: 10px 10px 6px 10px;
    --dt-body_border: 1px solid #f3f4f6;
    --dt-body_padding: 10px 12px;

    /* 2. Warna Row & Ordering (Transparansi disesuaikan agar lebih elegan) */
    --dt-column-ordering_alpha: 0.02;
    --dt-column-ordering_alpha-selected: 0.05;
    --dt-row_alpha-hover: 0.04;
    --dt-row_alpha-selected-stripe: 0.05;
    --dt-row_alpha-stripe: 0.02;
    --dt-control_color: #2a477a; /* Warna teks abu-abu gelap */
    /* 3. Desain Dasar Tombol Paginasi (Modern & Timbul Halus) */
    --dt-paging-button_box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Bayangan luar sangat tipis */
    --dt-paging-button_box-shadow-active: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* Sedikit mendem saat diklik */
    --dt-paging-button_padding: 0.375rem 0.75rem;
    --dt-paging-button_margin-left: 4px;
    --dt-paging-button_border-radius: 50rem;
    --dt-paging-button_background: #ffffff;
    --dt-paging-button_border: 1px solid #d1d5db; /* Border abu-abu kalem */
    --dt-paging-button_color: #4b5563;

    /* 4. Tombol Paginasi - State Non-aktif (Disabled) */
    --dt-paging-button_background-disabled: #f9fafb;
    --dt-paging-button_border-disabled: 1px solid #e5e7eb;
    --dt-paging-button_color-disabled: #9ca3af;

    /* 5. Tombol Paginasi - State Aktif (Navy solid, senada sidebar) */
    --dt-paging-button_background-current: #22335a;
    --dt-paging-button_border-current: 1px solid #22335a;
    --dt-paging-button_color-current: #ffffff;
    /* Shadow navy lembut di luar (drop shadow), membuatnya seolah melayang elegan */
    --dt-paging-button_box-shadow-current:
        0 4px 6px -1px rgba(34, 51, 90, 0.4),
        0 2px 4px -2px rgba(34, 51, 90, 0.3);

    /* 6. Tombol Paginasi - Hover pada State Aktif (gold, senada aksen brand) */
    --dt-paging-button_background-current-hover: var(--hc-primary, #f0ad2e);
    --dt-paging-button_border-current-hover: 1px solid var(--hc-primary, #f0ad2e);
    --dt-paging-button_color-current-hover: #ffffff;

    /* 7. Tombol Paginasi - Hover pada angka biasa */
    --dt-paging-button_background-hover: #f3f4f6; /* Hover abu-abu terang yang natural */
    --dt-paging-button_border-hover: 1px solid #d1d5db;
    --dt-paging-button_color-hover: #111827;
    --dt-paging-button_box-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Bayangan sedikit membesar saat di-hover */
    /* 8. Input (Pencarian & Dropdown) */
    --dt-input_border: 1px solid #d1d5db; /* Border abu-abu netral */
    --dt-input_border-focus: 1px solid var(--hc-primary, #f0ad2e); /* Border gold menyala saat diklik */
    --dt-input_border-radius: 50rem; /* Pill, seragam dengan filter & select2 */
    --dt-input_padding: 6px 14px;
    --dt-input_background: #f9fafb; /* Latar abu-abu sangat terang agar inner-shadow lebih tegas */
    --dt-input_color: #374151;

    /* Efek shadow-inner (bayangan di dalam) */
    --dt-input_box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Efek shadow-inner + Ring glow gold (efek fokus brand) saat input diklik */
    --dt-input_box-shadow-focus:
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(240, 173, 46, 0.25);
}
:root.dark {
    --dt-row_background-stripe: 255, 255, 255;
    --dt-row_background-hover: 255, 255, 255;
    --dt-column-ordering_background: 255, 255, 255;
    --dt-header_border: 1px solid rgb(89, 91, 94);
    --dt-body_border: 1px solid rgb(64, 67, 70);
    --dt-paging-button_color: var(--dt-control_color);
    --dt-paging-button_background-current: #4582fb75;
    --dt-paging-button_border-current: 1px solid rgba(255, 255, 255, 0.1);
    --dt-paging-button_background-current-hover: rgba(0, 0, 0, 0.1);
    --dt-paging-button_border-current-hover: 1px solid rgba(255, 255, 255, 0.3);
    --dt-paging-button_color-disabled: rgba(255, 255, 255, 0.25);
    --dt-paging-button_background-hover: rgba(0, 0, 0, 0.2);
    --dt-paging-button_border-hover: 1px solid transparent;
    --dt-input_border: 1px solid rgb(255, 255, 255, 0.2);
    --dt-input_background: rgb(44, 48, 51);
}

/*
 * Table styles
 */
table.dataTable {
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    /*
   * Header and footer styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
    font-weight: bold;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    padding: var(--dt-header_padding);
    border-bottom: var(--dt-header_border);
}
table.dataTable > thead > tr > th:active,
table.dataTable > thead > tr > td:active {
    outline: none;
}
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
    border-top: var(--dt-footer_border);
    padding: var(--dt-footer_padding);
}
table.dataTable {
    /*
   * Body styles
   */
}
table.dataTable > tbody > tr {
    background-color: var(--dt-row_background);
}
table.dataTable > tbody > tr:first-child > * {
    border-top: none;
}
table.dataTable > tbody > tr:last-child > * {
    border-bottom: none;
}
table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row_background-selected), 0.9);
    color: rgb(var(--dt-row-text_color-selected));
}
table.dataTable > tbody > tr.selected a {
    color: rgb(var(--dt-row-link_color-selected));
}
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
    padding: var(--dt-body_padding);
}
table.dataTable.row-border > tbody > tr > *,
table.dataTable.display > tbody > tr > * {
    border-top: var(--dt-body_border);
}
table.dataTable.row-border > tbody > tr:first-child > *,
table.dataTable.display > tbody > tr:first-child > * {
    border-top: none;
}
table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
table.dataTable.display > tbody > tr.selected + tr.selected > td {
    border-top-color: rgba(var(--dt-row_background-selected), 0.65);
}
table.dataTable.cell-border > tbody > tr > * {
    border-top: var(--dt-body_border);
    border-right: var(--dt-body_border);
}
table.dataTable.cell-border > tbody > tr > *:first-child {
    border-left: var(--dt-body_border);
}
table.dataTable.cell-border > tbody > tr:first-child > * {
    border-top: var(--dt-header_border);
}
table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody > tr:nth-child(odd) > * {
    box-shadow: inset 0 0 0 9999px
        rgba(var(--dt-row_background-stripe), var(--dt-row_alpha-stripe));
}
table.dataTable.stripe > tbody > tr:nth-child(odd).selected > *,
table.dataTable.display > tbody > tr:nth-child(odd).selected > * {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            var(--dt-row_alpha-selected-stripe)
        );
}
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px
        rgba(var(--dt-row_background-hover), var(--dt-row_alpha-hover));
}
table.dataTable.hover > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row_background-selected), 1) !important;
}
table.dataTable.order-column > tbody tr > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_2,
table.dataTable.order-column > tbody tr > .sorting_3,
table.dataTable.display > tbody tr > .sorting_1,
table.dataTable.display > tbody tr > .sorting_2,
table.dataTable.display > tbody tr > .sorting_3 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-column-ordering_background),
            var(--dt-column-ordering_alpha)
        );
}
table.dataTable.order-column > tbody tr.selected > .sorting_1,
table.dataTable.order-column > tbody tr.selected > .sorting_2,
table.dataTable.order-column > tbody tr.selected > .sorting_3,
table.dataTable.display > tbody tr.selected > .sorting_1,
table.dataTable.display > tbody tr.selected > .sorting_2,
table.dataTable.display > tbody tr.selected > .sorting_3 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            var(--dt-column-ordering_alpha-selected)
        );
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-column-ordering_background),
            calc(var(--dt-row_alpha-stripe) + var(--dt-column-ordering_alpha))
        );
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_2,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_2 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-column-ordering_background),
            calc(
                var(--dt-row_alpha-stripe) + var(--dt-column-ordering_alpha) -
                    0.007
            )
        );
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_3,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_3 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-column-ordering_background),
            calc(
                var(--dt-row_alpha-stripe) + var(--dt-column-ordering_alpha) -
                    0.015
            )
        );
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_1,
table.dataTable.order-column.stripe
    > tbody
    > tr:nth-child(odd).selected
    > .sorting_1 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            calc(
                var(--dt-row_alpha-selected-stripe) +
                    var(--dt-column-ordering_alpha)
            )
        );
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_2,
table.dataTable.order-column.stripe
    > tbody
    > tr:nth-child(odd).selected
    > .sorting_2 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            calc(
                var(--dt-row_alpha-selected-stripe) +
                    var(--dt-column-ordering_alpha) - 0.007
            )
        );
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_3,
table.dataTable.order-column.stripe
    > tbody
    > tr:nth-child(odd).selected
    > .sorting_3 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            calc(
                var(--dt-row_alpha-selected-stripe) +
                    var(--dt-column-ordering_alpha) - 0.015
            )
        );
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-hover),
            calc(
                var(--dt-row_alpha-stripe) + var(--dt-column-ordering_alpha) +
                    var(--dt-row_alpha-hover)
            )
        );
}
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-hover),
            calc(
                var(--dt-row_alpha-stripe) + var(--dt-column-ordering_alpha) +
                    var(--dt-row_alpha-hover) - 0.007
            )
        );
}
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-hover),
            calc(
                var(--dt-row_alpha-stripe) + var(--dt-column-ordering_alpha) +
                    var(--dt-row_alpha-hover) - 0.015
            )
        );
}
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            calc(
                var(--dt-row_alpha-selected-stripe) +
                    var(--dt-column-ordering_alpha)
            )
        );
}
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            calc(
                var(--dt-row_alpha-selected-stripe) +
                    var(--dt-column-ordering_alpha) +
                    var(--dt-row_alpha-hover) - 0.007
            )
        );
}
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
    box-shadow: inset 0 0 0 9999px
        rgba(
            var(--dt-row_background-selected),
            calc(
                var(--dt-row_alpha-selected-stripe) +
                    var(--dt-column-ordering_alpha) +
                    var(--dt-row_alpha-hover) - 0.015
            )
        );
}
table.dataTable.compact thead th,
table.dataTable.compact thead td,
table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td,
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
    padding: 4px;
}

div.dt-container div.dt-layout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0.75em 0;
}
div.dt-container div.dt-layout-row div.dt-layout-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    justify-content: flex-start;
    margin-right: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    justify-content: flex-end;
    margin-left: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell:empty {
    display: none;
}

@media screen and (max-width: 767px) {
    div.dt-container div.dt-layout-row:not(.dt-layout-table) {
        display: block;
    }
    div.dt-container
        div.dt-layout-row:not(.dt-layout-table)
        div.dt-layout-cell {
        display: block;
        text-align: center;
    }
    div.dt-container
        div.dt-layout-row:not(.dt-layout-table)
        div.dt-layout-cell
        > * {
        margin: 0.5em 0;
    }
    div.dt-container
        div.dt-layout-row:not(.dt-layout-table)
        div.dt-layout-cell.dt-layout-start {
        margin-right: 0;
    }
    div.dt-container
        div.dt-layout-row:not(.dt-layout-table)
        div.dt-layout-cell.dt-layout-end {
        margin-left: 0;
    }
}
div.dt-container div.dt-layout-start > *:not(:last-child) {
    margin-right: 1em;
}
div.dt-container div.dt-layout-end > *:not(:first-child) {
    margin-left: 1em;
}
div.dt-container div.dt-layout-full {
    width: 100%;
}
div.dt-container div.dt-layout-full > *:only-child {
    margin-left: auto;
    margin-right: auto;
}
div.dt-container div.dt-layout-table > div {
    display: block !important;
}

@media screen and (max-width: 767px) {
    div.dt-container div.dt-layout-start > *:not(:last-child) {
        margin-right: 0;
    }
    div.dt-container div.dt-layout-end > *:not(:first-child) {
        margin-left: 0;
    }
}
/*
 * Control feature layout
 */

div.dt-container {
    position: relative;
    clear: both;
}
div.dt-container .dt-search input {
    border: var(--dt-input_border);
    border-radius: var(--dt-input_border-radius);
    background-color: var(--dt-input_background);
    color: var(--dt-input_color);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    height: 32px;
    margin-left: 3px;
}

/* 3. Kotak Dropdown (Entries per page) */
div.dt-container .dt-input {
    border: var(--dt-input_border);
    border-radius: var(--dt-input_border-radius);
    background-color: var(--dt-input_background);
    color: var(--dt-input_color);
    padding: 0.25rem 1.75rem 0.25rem 0.5rem; /* Padding kanan lebih besar untuk panah dropdown */
    font-size: 0.875rem;
    height: 32px;
    line-height: 1.5;
}
div.dt-container .dt-input {
    border: var(--dt-input_border);
    border-radius: var(--dt-input_border-radius);
    background-color: var(--dt-input_background);
    color: var(--dt-input_color);

    /* PENYESUAIAN UNTUK UKURAN SMALL */
    padding: 0.25rem 0.5rem; /* Mengurangi ruang kosong (padding) bawaan */
    padding-right: 1.75rem; /* Penting untuk dropdown: memberi ruang di kanan agar ikon panah tidak tertimpa teks */
    font-size: 0.875rem; /* Memperkecil ukuran teks (sekitar 14px) */
    height: 32px; /* Menyamakan tinggi dengan kotak pencarian */
    line-height: 1.5;
}
div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--dt-paging-button_color);
    border: var(--dt-paging-button_border);
    border-radius: var(--dt-paging-button_border-radius);
    background: var(--dt-paging-button_background);
    box-shadow: var(--dt-paging-button_box-shadow);

    /* === PENYESUAIAN UNTUK UKURAN SMALL === */
    font-size: 0.875rem; /* Memperkecil ukuran font */
    min-width: 28px; /* Mengecilkan lebar minimal kotak */
    height: 28px; /* Menentukan tinggi kotak agar konsisten */
    line-height: 26px; /* Membantu teks tetap persis di tengah secara vertikal */
    padding: 0 0.25rem !important; /* Menimpa variabel padding bawaan agar tidak kebesaran */
    margin-left: 2px !important; /* Merapatkan jarak antar tombol */
}
div.dt-container .dt-paging .dt-paging-button.current {
    color: var(--dt-paging-button_color-current) !important;
    border: var(--dt-paging-button_border-current) !important;
    background: var(--dt-paging-button_background-current) !important;
}
div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: var(--dt-paging-button_color-current-hover) !important;
    border: var(--dt-paging-button_border-current-hover);
    background: var(--dt-paging-button_background-current-hover);
}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
    cursor: default;
    color: var(--dt-paging-button_color-disabled) !important;
    border: var(--dt-paging-button_border-disabled);
    background: var(--dt-paging-button_background-disabled);
    box-shadow: none;
}
div.dt-container .dt-paging .dt-paging-button:hover {
    color: var(--dt-paging-button_color-hover) !important;
    border: var(--dt-paging-button_border-hover);
    background: var(--dt-paging-button_background-hover);
}
div.dt-container .dt-paging .dt-paging-button:active {
    outline: none;
    background: var(--dt-paging-button_background-hover);
    box-shadow: var(--dt-paging-button_box-shadow-active);
}
div.dt-container .dt-paging .ellipsis {
    padding: 0 1em;
}
div.dt-container .dt-length {
    margin-left: 1em;
    font-size: 0.7rem;
}
div.dt-container .dt-search {
    margin-left: 1em;
    font-size: 0.7rem;
}
div.dt-container .dt-length {
    margin-left: 1em;
    font-size: 0.875rem; /* Ukuran small (sekitar 14px), selaras dengan input */
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Mencegah teks turun ke bawah / terpotong */
}

/* Mengatur jarak antara dropdown dan teks agar lebih rapi */
div.dt-container .dt-length select {
    margin: 0 0.5rem;
    font-size: 0.875rem;

    /* Menghilangkan ikon panah bawaan browser */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* MENGHILANGKAN IKON PANAH KUSTOM DARI FRAMEWORK/DATATABLES */
    background-image: none !important;

    padding: 0.25rem 0.5rem !important; /* Memaksa padding agar tidak ada ruang ekstra untuk ikon */
    text-align: center;
    width: auto;
}

div.dt-container .dt-info {
    font-size: 0.7rem;
}
div.dt-container .dt-processing,
div.dt-container .dt-paging {
    color: var(--dt-control_color);
}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: var(--dt-header_border);
}
div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: var(--dt-header_border);
}
div.dt-container.dt-empty-footer .dt-scroll-body tbody > tr:last-child > * {
    border-bottom: none;
}

html.dark table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
html.dark table.dataTable.display > tbody > tr.selected + tr.selected > td {
    border-top-color: rgba(var(--dt-row_background-selected), 0.65);
}

/*
 * Overrides for RTL support
 */
*[dir="rtl"] table.dataTable thead th,
*[dir="rtl"] table.dataTable thead td,
*[dir="rtl"] table.dataTable tfoot th,
*[dir="rtl"] table.dataTable tfoot td {
    text-align: right;
}
*[dir="rtl"] table.dataTable th.dt-type-numeric,
*[dir="rtl"] table.dataTable th.dt-type-date,
*[dir="rtl"] table.dataTable td.dt-type-numeric,
*[dir="rtl"] table.dataTable td.dt-type-date {
    text-align: left;
}
*[dir="rtl"] div.dt-container div.dt-layout-cell.dt-start {
    text-align: right;
}
*[dir="rtl"] div.dt-container div.dt-layout-cell.dt-end {
    text-align: left;
}
*[dir="rtl"] div.dt-container div.dt-search input {
    margin: 0 3px 0 0;
}